<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BoM操作</title>
    <style>
        body{
            margin:0px;
            padding: 0px;
        }
        .web{
            width: 950px;
            height: 1000px;
            background-color: #cecece;
            border: #666666 1px solid;
            margin:0 auto;
            position: relative;
        }
    </style>
</head>
<body>
    <!-- <h1>189000829谭君容</h1> -->
    <div class="web"></div>
    <script>
        var ad_width="100px";
        var ad_height="250px";
        var ad_img="img/ad1.jpg";//队列广告图
        var close_img="img/close.png";
        //创建广告容器的div
        var ad_left=document.createElement("div");//添加div左节点
        //设置左队列的宽、高、定位等样式
        ad_left.style.width=ad_width;
        ad_left.style.height=ad_height;
        ad_left.style.padding="0px";
        ad_left.style.position="absolute";
        ad_left.style.left="30px";
        ad_left.style.top="20px";
        //创建img元素，并加入到ad_left里面 作为广告图片
        var adimg=document.createElement("img");
        adimg.src=ad_img;//把写定的图片赋值给adimg
        ad_left.appendChild(adimg);
        //创建关闭按钮，并放入到ad_left中
        var closeimg=document.createElement("img");
        closeimg.src=close_img;
        closeimg.style.width="50px";
        closeimg.style.position="absolute";
        //规定关闭图片的位置
        closeimg.style.left="50px";
        closeimg.style.top="235px";
        closeimg.style.cursor="pointer";
        ad_left.appendChild(closeimg);
        //把ad_left添加到html中
        document.documentElement.appendChild(ad_left);
        //注册事件，实现关闭广告功能
        closeimg.addEventListener("click",function(){
            ad_left.style.display="none";
        })

        //克隆左边队列到右边
        let ad_right=ad_left.cloneNode(true);
        ad_right.style.padding="0px";
        ad_right.style.left="1200px";
        ad_right.style.top="20px";
        let web=document.querySelectorAll("div")[0];
        web.appendChild(ad_right);
        //创建关闭按钮，并放入到ad_right中
        var closeimg=document.createElement("img");
        closeimg.src=close_img;
        closeimg.style.width="50px";
        closeimg.style.position="absolute";
        //规定关闭图片的位置
        closeimg.style.left="50px";
        closeimg.style.top="235px";
        closeimg.style.cursor="pointer";
        ad_right.appendChild(closeimg);
        //把ad_right添加到html中
        document.documentElement.appendChild(ad_right);
        //注册事件，实现关闭广告功能
        closeimg.addEventListener("click",function(){
            ad_right.style.display="none";
        })

        //选作
        var ad_button=document.createElement("div");//添加div下面的节点
        var ad_img2="img/ad2.jpg";//给ad_img2赋值
        var adimg2=document.createElement("img");//添加img节点
        adimg2.src=ad_img2;
        //设定图片的样式
        ad_button.appendChild(adimg2);
        ad_button.style.width=ad_width;
        ad_button.style.height=ad_height;
        ad_button.style.padding="0px";
        ad_button.style.position="absolute";
        ad_button.style.left="867px";
        ad_button.style.top="320px";
        //ad_button.style.position="fixed";
        document.documentElement.appendChild(ad_button);
        //创建关闭按钮，并放入到ad_button中
        var closeimg=document.createElement("img");
        closeimg.src=close_img;
        closeimg.style.width="50px";
        closeimg.style.position="absolute";
        //规定关闭图片的位置
        closeimg.style.left="250px";
        closeimg.style.top="235px";
        closeimg.style.cursor="pointer";
        ad_button.appendChild(closeimg);
        //把ad_button添加到html中
        document.documentElement.appendChild(ad_button);
        //注册事件，实现关闭广告功能
        closeimg.addEventListener("click",function(){
            ad_button.style.display="none";
            ad_button.style.translate="10s";
        })
       
        
        //实现对联广告随滚动条移动
        window.addEventListener("scroll",function(){
            var st1=document.documentElement.scrollTop||document.body.scrollTop
            ad_left.style.top=(st1+20)+"px";
        })
        window.addEventListener("scroll",function(){
            var st1=document.documentElement.scrollTop||document.body.scrollTop
            ad_right.style.top=(st1+20)+"px";
        })
        window.addEventListener("scroll",function(){
            var st1=document.documentElement.scrollTop||document.body.scrollTop
            ad_button.style.top=(st1+20)+"px";
        })
    </script>
</body>
</html>